<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、省外人员流入流出趋势 </div>
<div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至目前，省外人员流入流出趋势如下图所示： </div>
<div id="my_echarts5" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 省外人员流入流出趋势图</div>

<script>
    (function () {

        $(document).ready(function(){
            // 五、省外人员流入流出趋势
            var result5 = [
                {
                    type: '人员流入',
                    datas: ${outIslandFlowInUser}
                },
                {
                    type: '人员流出',
                    datas: ${outIslandFlowOutUser}
                },
            ];
            var echarts5 = echarts.init(document.getElementById("my_echarts5"));
            var series5 = getSCategory(result5, 2).series;
            var xCategory5 = getSCategory(result5, 2).xCategory;
            var legend5 = ['人员流入', '人员流出'];
            var optionLine5 = getOption(xCategory5, series5, '省外人员流入流出趋势', legend5, ['#4b91ff', '#f2637b', '#fad337']);
            echarts5.setOption(optionLine5);
        });
        function getOption(xCategory, series, title, legend, color) {
            return {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                color: color? color: ['#4b91ff'],
                legend: {
                    show: legend?true: false,
                    data: legend,
                    icon: 'circle',
                    right: '4%'
                },
                grid: {
                    left: "8%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    data: xCategory,
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            }
        }
        function getSCategory(result, type) {
            var series = [], xCategory = [], data = []
            $.each(result,function(index,item) {
                if(type===1) {
                    data.push(item.count);
                    xCategory.push(item.date);
                    if(index === (result.length-1)) {
                        series.push({ type: 'line', data: data, areaStyle: {opacity: 0.3} })
                    }
                } else if(type===2) {
                    var obj = { name: '', type: 'line', data: [] }
                    var count = $.map(item.datas, function(n, i){ return n.count; })
                    if(index===0) {
                        xCategory = $.map(item.datas, function(n, i){ return n.date; })
                    }
                    obj.name = item.type;
                    obj.data = count;
                    series.push(obj);
                }
            });
            return {
                series,
                xCategory
            }
        }
    })()
</script>